<template>
    <rx-dialog @handOk="handOk" @cancel="cancel">
        <rx-layout>
            <div slot="center">
                <rx-monaco-editor
                    ref="monacoEditor"
                    language="javascript"
                    v-model="script"
                    class="monacoEditor"
                >
                    <template v-slot:monacoeditor>
                        <a-dropdown :getPopupContainer="p=>p.parentNode">
                            <a-menu slot="overlay">
                                <template v-for="item in scriptInsertAry">
                                    <a-menu-item :key="item.clickEvent" v-if="!item.children"
                                                 @click="handInsertScript(item)"> {{ item.name }}
                                    </a-menu-item>
                                    <a-sub-menu :key="item.name"
                                                v-if="item.children && item.children.length>0">
                                        <span slot="title">{{ item.name }}</span>
                                        <a-menu-item :key="subItem.name"
                                                     v-for="subItem in item.children"
                                                     @click="handInsertScript(subItem)">
                                            {{ subItem.name }}
                                        </a-menu-item>
                                    </a-sub-menu>
                                </template>
                            </a-menu>
                            <a-button style="margin-left: 8px" size="small">
                                {{i18n('script.insertCode', '插入代码')}}<a-icon type="down"/>
                            </a-button>
                        </a-dropdown>

                    </template>
                </rx-monaco-editor>
            </div>
        </rx-layout>
    </rx-dialog>
</template>

<script>
import {RxDialog, RxLayout,Util,RxMonacoEditor} from "@lowcode/jpaas-common-lib";
export default {
    name: "GisFuncScriptDialog",
    props: {
        funcScript:{
            type:String,
            default: ""
        },
        type:{
            type:String
        },
        layerid: {
            type: String,
            default: ""
        },
        destroy: {
            type: Function
        },
    },
    components: {
        RxDialog,
        RxLayout,
        RxMonacoEditor
    },
    data() {
        return {
            script:"",
            defScript:{
                receive:" /**\n" +
                    "  * 发布组件触发事件后，GIS地图会触发当前方法(JavaScript语法)\n" +
                    "  * 参数1：row(事件传递的参数对象)\n" +
                    "  * 参数2：callback(data,style)(回调函数，参数1:geoJson数据，参数2:风格(可不传))\n" +
                    "*/",
                publish:"/**\n" +
                    " * 双击地图触发事件\n" +
                    " * 参数e 地图返回的属性\n" +
                    " * {\n" +
                    " * latlng:\"地理坐标\",\n" +
                    " * layerPoint:\"对于地图图层的像素坐标\",\n" +
                    " * containerPoint:\"相对于地图容器的像素坐标\",\n" +
                    " * containerPoint:\"触发此 Leaflet 事件的原始 DOM MouseEvent 或 DOM TouchEvent\",\n" +
                    " * } \n" +
                    " */",
                before:"/**\n" +
                    " * 地图初始化前函数\n" +
                    " */\n",
                after:"/**\n" +
                    " * 地图初始化后函数\n" +
                    " * this.mapItem：初始化的地图对象\n" +
                    " * this.layerGroup：图层组\n" +
                    " */\n",
            },
            scriptInsertAry: [
                {
                    name: this.i18n('script.insertJavaFun', '插入AJAX函数'),
                    children: [
                        {
                            name: "get",
                            clickEvent: "addAjax"
                        },
                        {
                            name: "postForm",
                            clickEvent: "addAjax"
                        },
                        {
                            name: "postJson",
                            clickEvent: "addAjax"
                        }
                    ]
                },
                {
                    name: this.i18n2("clearGeoJson", "清空GeoJson"),
                    clickEvent: "clearGeoJson"
                },
                {
                    name: this.i18n2("addGeoJson", "添加GeoJson图层"),
                    clickEvent: "addGeoJsonData"
                },
            ]
        }
    },
    created(){
        if (this.funcScript) {
            this.script = this.funcScript;
        } else {
            this.script = this.defScript[this.type]
        }
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "formCustom", key);
        },
        i18n2(name, text, key) {
            return this.$ti18(name, text, "gisMapDef", key);
        },
        /**
         *  插入脚本。
         * @param item
         */
        handInsertScript(item){
            this[item.clickEvent](item.name);
        },
        /**
         *  插入Ajax函数。
         * @param name
         */
        addAjax(name){
            let json={
                "get":`
                    //params ${this.i18n('script.nullKeyJson', '可以为空，可以是一个键值对JSON')}
                    this.rxAjax.get(url,params).then(res=>{});
                `,
                "postForm":`//params ${this.i18n('script.nullKeyJson', '可以为空，可以是一个键值对JSON')}
                    this.rxAjax.postForm(url,params).then(res=>{});`,
                "postJson":`//params ${this.i18n('script.nullKeyJson', '可以为空，可以是一个键值对JSON')}
                    this.rxAjax.postJson(url,params).then(res=>{});`
            }
            this.$refs.monacoEditor.insertContent(json[name]);
        },
        clearGeoJson(){
            let str = "//清空已有GeoJson图层\n" +
                "this.clearGeoJsonData(); ";
            this.$refs.monacoEditor.insertContent(str);
        },
        addGeoJsonData(){
            let str = "/**\n" +
                " * 添加GeoJson图层\n" +
                " * data geoJson数据\n" +
                " * style 图层样式,为空默认蓝底\n" +
                " */\n" +
                "this.addGeoJsonData(data,style); ";
            this.$refs.monacoEditor.insertContent(str);
        },
        cancel() {
            Util.closeWindow(this, "cancel");
        },
        handOk() {
            Util.closeWindow(this, "ok", this.script);
        },
    },
    watch: {}
}
</script>

<style scoped>

</style>